<template>
  <div>
    <Loading :loading="loading">
      <NavBar :isShowLeft="false">
        <template slot="left">
          <van-icon name="arrow-left" @click="handleBack" />
        </template>
        <template slot="content">
          <div v-if="$route.params.id && $route.params.id !== ''">客户明细</div>
        </template>
      </NavBar>
      <van-form ref="userInfoForm">
        <div class="c-hi306n">
          <div class="c-91t2s9">
            <div class="c-91t2s9-title">基本信息</div>
            <div class="c-91t2s9-list">
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">姓名</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      v-model="peoInfo.chnName"
                      name="chnName"
                      :rules="formRules.nameRules"
                    ></van-field>
                  </div>
                </div>
              </div>
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">证件类型</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      :value="peoInfo.idType"
                      name="idType"
                      @click="handleVisible('idType')"
                      :rules="formRules.idTypeRules"
                    >
                      <template #input>
                        <PeoInsured
                          ref="idType"
                          title="证件类型"
                          @confirm="value => handleConfirm(value, 'idType')"
                          placeholder="请选择证件类型"
                          :defaultValue="peoInfo.idType"
                          :columns="cardList"
                        />
                      </template>
                    </van-field>
                  </div>
                  <img class="c-8moxqg-item-left" src="./img/left.png" />
                </div>
              </div>
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">证件号码</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      v-model="peoInfo.idNo"
                      name="idNo"
                      placeholder="请扫描您的证件"
                      :rules="
                        peoInfo.idType == 1
                          ? formRules.idNoeRules
                          : formRules.noEmptyRules
                      "
                      maxlength="18"
                    ></van-field>
                  </div>
                  <div
                    class="flex-row flex-align-center"
                    @click="handleGoToScan('card', 'idNo')"
                  >
                    <img class="c-8moxqg-item-img" src="./img/scan.png" />
                    <span class="c-8moxqg-item-img-text">扫描</span>
                  </div>
                </div>
              </div>
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">手机号码</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      v-model="peoInfo.mobile"
                      name="mobile"
                      placeholder="请输入手机号"
                      :rules="formRules.mobileRules"
                    ></van-field>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-91t2s9">
            <div
              class="c-91t2s9-title flex-row flex-align-center flex-justify-between"
            >
              <div class="c-dcfhkr-title">选填信息</div>
              <img
                class="c-dcfhkr-img"
                :class="isShow ? '' : 'c-dcfhkr-img-active'"
                src="./img/up.png"
                @click="isShow = !isShow"
              />
            </div>
            <div class="c-91t2s9-list" v-if="isShow">
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">所在地区</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      name="area"
                      @click="handleVisible('area')"
                      :areaList="areaList"
                    >
                      <template #input>
                        <PeoArea
                          ref="area"
                          @confirm="value => handleConfirm(value, 'area')"
                          placeholder="请选择所在地区"
                          :defaultValue="peoInfo.area"
                          :value="peoInfo.area"
                          :areaList="areaList"
                        />
                      </template>
                    </van-field>
                  </div>
                  <img class="c-8moxqg-item-left" src="./img/left.png" />
                </div>
              </div>
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">详细地区</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      type="textarea"
                      rows="1"
                      autosize
                      class="c-8moxqg-item-value-text"
                      v-model="peoInfo.street"
                      name="street"
                      placeholder="例：学院路37号1号楼109室"
                    ></van-field>
                  </div>
                </div>
              </div>
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">电子邮箱</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      v-model="peoInfo.email"
                      name="email"
                      :rules="formRules.cusEmailRules"
                    ></van-field>
                  </div>
                </div>
              </div>
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">开户行</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      :value="peoInfo.bankId"
                      name="bankId"
                      @click="handleVisible('bankId')"
                      area
                    >
                      <template #input>
                        <PeoInsured
                          ref="bankId"
                          title="开户银行"
                          @confirm="value => handleConfirm(value, 'bankId')"
                          placeholder="请选择开户银行"
                          :defaultValue="peoInfo.bankId"
                          :columns="bankList"
                        />
                      </template>
                    </van-field>
                  </div>
                  <img class="c-8moxqg-item-left" src="./img/left.png" />
                </div>
              </div>
              <div class="c-91t2s9-list-item">
                <div class="c-8moxqg flex-row flex-align-center">
                  <div class="c-8moxqg-item-label">银行卡号</div>
                  <div class="c-8moxqg-item-value">
                    <van-field
                      class="c-8moxqg-item-value-text"
                      v-model="peoInfo.cardNo"
                      name="cardNo"
                      placeholder="请扫描您的银行卡"
                    ></van-field>
                  </div>
                  <div
                    class="flex-row flex-align-center"
                    @click="handleGoToScan('bank', 'cardNo')"
                  >
                    <img class="c-8moxqg-item-img" src="./img/scan.png" />
                    <span class="c-8moxqg-item-img-text">扫描</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-hi306n-bottom" @click="handleNext">保存</div>
        </div>
      </van-form>
    </Loading>
  </div>
</template>
<script>
import NavBar from '@/components/h5header'
import PeoInsured from '@/components/peoInsured'
import PeoArea from '@/components/popArea'
import API from '@/services/h5/my'
import comAPI from '@/services/h5/common'
import Loading from '@/components/data-loading'
// import { isBankCount2 } from '@/utils/public/validator'
import { PEOPLE_TYPE } from '@/config/h5/index.js'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  components: { NavBar, PeoInsured, PeoArea, Loading },
  data() {
    return {
      loading: false,
      isShow: true,
      peoShow: false,
      cardList: [],
      bankList: [],
      sexList: [],
      areaList: {
        city_list: {},
        county_list: {},
        province_list: {}
      }
    }
  },
  computed: {
    ...mapState('addCustomer', ['peoInfo']),
    ...mapGetters('common', ['formRules'])
  },
  async mounted() {
    await this.init()
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (to.params.id === undefined && from.name !== '扫描页面') {
        vm.initData()
      } else {
        if (to.params.id && from.name !== '扫描页面') {
          document.title = '客户明细'
          vm.getCustomerIndetail()
        }
      }
    })
  },
  methods: {
    ...mapMutations('addCustomer', [
      'setCustomerData',
      'initData',
      'setPeoInfo'
    ]),
    async init() {
      this.loading = true
      // 获取所需要的字典值，性别/证件类型/银行卡类型
      let res = await Promise.all([
        comAPI.getDictList({
          codeType: 'sex'
        }),
        comAPI.getDictList({
          codeType: 'idType'
        }),
        comAPI.getBankList()
      ])
      let [provice, city, country] = await Promise.all([
        comAPI.getAreaList('01'),
        comAPI.getAreaList('02'),
        comAPI.getAreaList('03')
      ])
      this.areaList = {
        city_list: this.getAreaData(city),
        county_list: this.getAreaData(country),
        province_list: this.getAreaData(provice)
      }
      this.sexList = res[0].data.data
      this.cardList = res[1].data.data
      this.bankList = []
      res[2].data.data.map(item => {
        this.bankList.push({
          code: item.bankId,
          codeName: item.bankName
        })
      })
      this.loading = false
    },
    getAreaData(res) {
      if (res.data && res.data.code === 1000) {
        let data = res.data.data
        let obj = {}
        data.forEach(item => {
          obj[item.placeCode] = item.placeName
        })
        return obj
      }
    },
    getCustomerIndetail() {
      let params = {
        id: this.$route.params.id
      }
      API.customerIndetail(params).then(res => {
        if (res.data && res.data.code === 1000) {
          let data = res.data.data
          data.area = [
            res.data.data.province,
            res.data.data.city,
            res.data.data.country
          ]
          this.setPeoInfo(data)
        }
      })
    },
    getSelctData(value, arr) {
      let name = ''
      arr.forEach(item => {
        if (value == item.code) {
          name = item.codeName
        }
      })
      return name
    },
    getAreaSelctData(value, areaList) {
      let province = ''
      let city = ''
      let country = ''

      if (value[0]) {
        province = areaList.province_list[value[0]]
      }
      if (value[1]) {
        city = areaList.city_list[value[1]]
      }
      if (value[2]) {
        country = areaList.county_list[value[2]]
      }
      let str = province + ' ' + city + ' ' + country
      return str
    },
    handleNext() {
      this.$refs.userInfoForm
        .validate()
        .then(async () => {
          let params = {
            bankId: this.peoInfo.bankId,
            cardNo: this.peoInfo.cardNo,
            chnName: this.peoInfo.chnName,
            city: this.peoInfo.area[1],
            country: this.peoInfo.area[2],
            email: this.peoInfo.email,
            idNo: this.peoInfo.idNo,
            idType: this.peoInfo.idType,
            mobile: this.peoInfo.mobile,
            province: this.peoInfo.area[0],
            street: this.peoInfo.street,
            id: this.$route.params.id ? this.$route.params.id : ''
          }
          // let res = await API.addCustomer(params)
          let res = await API.addCustomer(this.peoInfo)
          if (res.data && res.data.code === 1000) {
            if (params.id !== '') {
              this.$message.success('客户信息修改成功')
            } else {
              this.$message.success('新增客户成功')
            }
            this.$router.go(-1)
            this.initData()
          }
        })
        .catch(() => {})
    },
    handleGoToScan(type, prop) {
      // if (this.$route.params.id && this.$route.params.id !== '') {
      //   return false
      // }
      let path = `/scan`
      this.$router.push({
        path,
        query: {
          type: type,
          prop: prop,
          peopleType: PEOPLE_TYPE.POLICT_HOLDER
        }
      })
    },
    handleBack() {
      if (this.$route.params.id && this.$route.params.id !== '') {
        this.$router.go(-1)
        this.initData()
        return false
      }
      this.$dialog
        .confirm({
          title: '此页面信息未保存，确认离开页面吗'
        })
        .then(() => {
          this.initData()
          this.$router.go(-1)
        })
        .catch(() => {})
    },
    handleVisible(type) {
      // if (this.$route.params.id && this.$route.params.id !== '') {
      //   return false
      // }
      this.$refs[type].visible = true
    },
    handleConfirm(value, prop) {
      this.setCustomerData([prop, value])
      // this.peoInfo[prop] = value
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.van-field--error .van-field__control::placeholder {
  color: #999;
}
.c-hi306n {
  position: relative;
  background: #fafafa;
  box-sizing: border-box;
  height: calc(100vh - 38px);
  overflow-y: scroll;
  &-bottom {
    margin: 20px 15px;
    background: @c-color-primary;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 17px;
    color: #fff;
    border-radius: 4.5px;
  }
}
.c-91t2s9 {
  margin-top: 13px;
  padding: 15px;
  background: #fff;
  &-title {
    font-size: 19px;
    font-weight: bold;
    color: #000;
    margin-bottom: 13px;
  }
  &-list-item {
    border-bottom: 0.5px solid #e9e9e9;
  }
}
.c-8moxqg-item {
  &-label {
    width: 60px;
    font-size: 15px;
    color: #333;
    text-align: justify;
    text-align-last: justify;
  }
  &-value {
    flex: 1;
  }
  &-value-text {
    font-size: 15px;
    color: #333;
  }
  &-value-text-active {
    /deep/.van-field__control:disabled {
      color: #333;
      -webkit-text-fill-color: #333;
    }
  }
  &-left {
    width: 7px;
    height: 13px;
  }
  &-img {
    width: 15px;
    height: 15px;
  }
  &-img-text {
    font-size: 14px;
    color: @c-color-primary;
  }
}
.wuli {
  .c-8moxqg-item {
    &-label {
      width: 60px;
      font-size: 15px;
      color: #333;
      text-align: justify;
      text-align-last: justify;
    }
    &-value {
      flex: 1;
    }
    &-value-text {
      display: block;
      line-height: 40px;
      height: 40px;
      margin-left: 20px;
      font-size: 15px;
      color: #333;
    }
    &-value-text-active {
      /deep/.van-field__control:disabled {
        color: #333;
        -webkit-text-fill-color: #333;
      }
    }
    &-left {
      width: 7px;
      height: 13px;
    }
    &-img {
      width: 15px;
      height: 15px;
    }
    &-img-text {
      font-size: 14px;
      color: @c-color-primary;
    }
  }
}
.c-dcfhkr-img {
  width: 13px;
  height: 7px;
}
.c-dcfhkr-img-active {
  transform: rotate(180deg);
}
</style>
